<!--
 * @Author: your name
 * @Date: 2021-08-25 11:08:25
 * @LastEditTime: 2021-08-25 12:02:21
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-admin-template\src\components\ImageHolder\index.vue
-->
<template>
  <div>
    <!-- 使用 Element 提供的 image 组件 -->
    <el-image :src="img">
      <!-- 定义 error 插槽，当图片解析失败的时候，就会触发 error 插槽 -->
      <div slot="error" class="image-slot">
        <!-- 解析失败以后的处理，我们的需求是设置默认图片 -->
        <img class="errimg" src="./head.jpg" alt="">
      </div>
    </el-image>
  </div>
</template>
<script>
export default {
  name: 'App',
  props: {
    img: {
      type: String,
      default: ''
    }
  }
}
</script>
<style scoped lang="scss">
.errimg {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
::v-deep .el-image__inner {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
</style>
